
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>商品列表</legend>
    </fieldset>

    <table class="layui-hide" id="userList" lay-filter="userList"></table>

    <script th:src="@{/layui/layui.js}"></script>

    <!-- 头部信息栏 -->
    <script type="text/html" id="toolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="add">添加用户</button>
            <button class="layui-btn layui-btn-sm" lay-event="delete">批量删除</button>
        </div>
    </script>

    <!-- 行工具栏 -->
    <script type="text/html" id="barLine">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script>
        layui.use(['table','layer'],function(){
            var table = layui.table;
            var layer = layui.layer;
            table.render({
                elem: '#userList'
                ,url:'[[@{/product/allProduct}]]'
                ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,page: true
                ,toolbar:'#toolbar'   //头部工具栏
                ,defaultToolbar: ['filter', 'exports', 'print']
                ,parseData: function(res){ //res 即为原始返回的数据
                    return {
                        "code": res.code == 200 ? 0 : res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.data.total, //解析数据长度
                        "data": res.data.list //解析数据列表
                    };
                }

                ,cols: [
                    [
                    {type:'checkbox'}
                    ,{field:'uid', title: '用户ID', sort: true}
                    ,{field:'pid', title: '商品ID', sort: true}
                    ,{field:'pname', title: '商品名称'}
                    ,{field:'ppicture', title: '商品图片'}
                    ,{field:'pprice', title: '商品价格'}
                    ,{field:'pwarnCount', title: '预警数量'}
                    ,{field:'pallCount', title: '所有数量'}
                    ,{field:'pdesc', title: '商品描述'}
                    ,{field:'poneClassify', title: '一级分类'}
                    ,{field:'ptwoClassify', title: '二级分类'}
                    ,{field:'pisSell', title: '状态'}
                    ,{field:'pstatus', title: '是否在售'}
                    ,{fixed: 'right', title:'操作', toolbar: '#barLine', width:150}
                ]
                ]
            });

            /* 监听头部工具栏 */
            table.on('toolbar(userList)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'add':

                        layer.open({
                            type:2,
                            content:"[[@{/product/addProductPage}]]",
                            area: ['1000px', '700px']
                        });
                        break;
                    case 'delete':
                        var data = checkStatus.data;
                        layer.msg('选中了：'+ data.length + ' 个');
                        break;

                };
            });

            /* 监听行工具栏 */
            table.on('tool(userList)', function(obj){
                var data = obj.data;
                //console.log(obj)
                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        obj.del();
                        layer.close(index);
                    });
                } else if(obj.event === 'edit'){
                    layer.open({
                        type:2,
                        content:"[[@{/product/editProduct?id=}]]" + data.pid,
                        area: ['500px', '300px']
                    });
                }
            });
        });
    </script>
</body>
</html>
